<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>MeteoCal - Notification</title>
        <link type="text/css" rel="stylesheet" href="../resources/css/notification.css" />
    </h:head>
    <body>
     <div id="header"></div>
        <a href="homepage.xhtml?faces-redirect=true" ><img id="logo" src="../resources/images/logo.png"/></a> 
        <h:form id="formdock">
            <p:dock position="top" maxWidth="30" itemWidth="55">
                <p:menuitem  value="Invitations" action="#{invitationBean.retriveInvitation()}" icon="../resources/images/mail.png"/>
                <p:menuitem action="#{eventBean.tocreateEvent()}" value="New Event" icon="../resources/images/new.png"/>
                <p:menuitem value="Notifications" action="#{userBean.notifications()}" icon="../resources/images/Notification.png"/>
            </p:dock>
           <p:panelGrid id="panelSearch" styleClass="panelSearch" columns="2">
                <p:autoComplete styleClass="autoCompleteSearch" placeholder="Search"  id="themePojo" value="#{scheduleUserBean.selectedTheme}" completeMethod="#{autoCompleteView.completeTheme}"
                                var="theme" itemLabel="#{theme.name}" itemValue="#{theme}" forceSelection="true" converter="themeConverter"/>
                <p:commandButton icon="ui-icon-search" id="search" value="Search" action="#{scheduleUserBean.search()}"/>
                <h:link styleClass="advSearch" id="toolTipFade" value="Advanced search" outcome="/user/advsearch?faces-redirect=true"/>
            </p:panelGrid>
            <p:menuButton value ="Options"> 
                <p:menuitem value="Profile" action="#{userBean.goToProfile()}" icon="ui-icon-person"/>
                <p:menuitem value="Export Events" ajax="false" onclick="PrimeFaces.monitorDownload(start, stop);" icon="ui-icon-arrowthick-1-s" actionListener="#{scheduleBean.createCalendarIcs()}">
                    <p:fileDownload value="#{scheduleBean.export()}" />
                </p:menuitem>
                <p:menuitem value="Import Events" onclick="PF('importDialog').show();" icon="ui-icon-arrowthick-1-n"/>
                <p:separator/>
                <p:menuitem value="Logout" action="#{LoginBean.logout()}" icon="ui-icon-power"/>
            </p:menuButton>
        </h:form>
        
        <h:form enctype="multipart/form-data">
            <p:dialog  modal="true" widgetVar="importDialog" header="Import new events" draggable="false" closable="true" resizable="false">
                    <p:growl id="growl" showDetail="true" />
                    <p:fileUpload value="#{scheduleBean.fileUploaded}" mode="simple"/>
                    <p:commandButton ajax="false" actionListener="#{scheduleBean.upload()}" value="Upload" onclick="PrimeFaces.monitorDownload(start, stop);"/>  
            </p:dialog>
        </h:form>
        
      
       
        <h:form id="readnotifications" > 
    <p:carousel value="#{notificationBean.readNotifications}"  headerText="Read notification" var="car" styleClass="carousel" itemStyleClass="carItem" style="float: bottom;">
                                <h:panelGrid columns="2" >
                                    <f:facet name="header">
                                        <p:graphicImage url="#{notificationBean.getIcon(car.notification.idEvent.city, car.notification.idEvent.dateBegin)}"/>
                                        <h:outputLabel value="#{notificationBean.getDescription(car.notification.idEvent.city, car.notification.idEvent.dateBegin)} " /><br></br>
                                        <h:outputLabel value="#{(car.notification.text)} " />  

                                    </f:facet>

                                    <h:outputLabel for="nameRN" value="Name: " />  
                                    <h:outputText id="nameRN" value="#{car.notification.idEvent.name}" />     
                                    <h:outputLabel for="cityRN" value="City: " />  
                                    <h:outputText id="cityRN" value="#{car.notification.idEvent.city}" />
                                    <h:outputLabel for="dateBeginRN" value="From " />  
                                    <h:outputText id="dateBeginRN" value="#{car.notification.idEvent.dateBegin}" />
                                    <h:outputLabel for="dateEndRN" value="To " />  
                                    <h:outputText id="dateEndRN" value="#{car.notification.idEvent.dateEnd}" />
                                  
                                </h:panelGrid>

                    </p:carousel>
                    
                    
                    <p:dialog header="Car Info" widgetVar="carDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
                        <p:outputPanel id="carDetail" style="text-align:center;">
                            <p:panelGrid  columns="2" rendered="#{not empty notificationBean.selectedReadNotification}" columnClasses="label,value">
                                <f:facet name="header">
                                    <p:graphicImage url="#{notificationBean.getIcon(notificationBean.selectedReadNotification.notification.idEvent.city,notificationBean.selectedReadNotification.notification.idEvent.dateBegin)}"/>
                                    <h:outputLabel value="#{notificationBean.getDescription(notificationBean.selectedReadNotification.notification.idEvent.city,notificationBean.selectedReadNotification.notification.idEvent.dateBegin)} " />

                                </f:facet>

                                    <h:outputLabel for="nameDl" value="Name: " />  
                                    <h:outputText id="nameDl" value="#{notificationBean.selectedReadNotification.notification.idEvent.name}" />     
                                    <h:outputLabel for="cityDl" value="City: " />  
                                    <h:outputText id="cityDl" value="#{notificationBean.selectedReadNotification.notification.idEvent.city}" />
                                    <h:outputLabel for="dateBegin" value="From " />  
                                    <h:outputText id="dateBegin" value="#{notificationBean.selectedReadNotification.notification.idEvent.dateBegin}" />
                                    <h:outputLabel for="dateEnd" value="To " />  
                                    <h:outputText id="dateEnd" value="#{notificationBean.selectedReadNotification.notification.idEvent.dateEnd}" />
                            
                            </p:panelGrid>
                        </p:outputPanel>
                    </p:dialog>
            
        </h:form><h:form id="deleteparticipant">
                    <p:carousel value="#{notificationBean.participantNotifications}" headerText="General Notification" var="car2" itemStyleClass="carItem" numVisible="3" easing="easeOutBounce" styleClass="carousel carousel2" >
                        <p:panelGrid columns="2">
                            <f:facet name="header">
                                <p:graphicImage url="http://images.vectorhq.com/images/premium/thumbs/121/user-profile-sign-web-icon-with-delete-glyph-series-buttons-stone-style-rounded-square-shape-with-black-shadow-and-gray_121352488.jpg"/> 
                            </f:facet>

                            <h:outputText value="Event:" />
                            <h:outputText value="#{car.notification.idEvent.name}" />
                            <f:facet name="footer">
                                <p:commandButton update=":deleteparticipant:carDetail2" oncomplete="PF('carDialog2').show()" icon="ui-icon-search">
                                    <f:setPropertyActionListener value="#{car2}" target="#{notificationBean.selectedParticipantNotification}" />
                                </p:commandButton>
                                <h:outputText value="View the detailsof the event " />  

                            </f:facet>
                           </p:panelGrid>
                    </p:carousel> 
                    
                    
                     <p:dialog header="Car Info" widgetVar="carDialog2" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
                        <p:outputPanel id="carDetail2" style="text-align:center;">
                            <p:panelGrid  columns="2" rendered="#{not empty notificationBean.selectedParticipantNotification}" columnClasses="label,value">
                                <f:facet name="header">
                                    <p:graphicImage url="http://images.vectorhq.com/images/premium/thumbs/121/user-profile-sign-web-icon-with-delete-glyph-series-buttons-stone-style-rounded-square-shape-with-black-shadow-and-gray_121352488.jpg"/> 
                                </f:facet>

                                <h:outputLabel for="name2" value="Name: " />  
                                <h:outputText id="name2" value="#{notificationBean.selectedParticipantNotification.notification.idEvent.name}" />     
                                <h:outputLabel for="city2" value="City: " />  
                                <h:outputText id="city2" value="#{notificationBean.selectedParticipantNotification.notification.idEvent.city}" />
                                <h:outputLabel for="dateBegin2" value="From " />  
                                <h:outputText id="dateBegin2" value="#{notificationBean.selectedParticipantNotification.notification.idEvent.dateBegin}" />
                                <h:outputLabel for="dateEnd2" value="To " />  
                                <h:outputText id="dateEnd2" value="#{notificationBean.selectedParticipantNotification.notification.idEvent.dateEnd}" />

                            </p:panelGrid>
                            <p:commandButton id="readDeleteParticipant" action="#{notificationBean.readParticipantNotifications()}" value="Ok" onclick="carDialog2.hide()" />

                        </p:outputPanel>
                    </p:dialog>
        </h:form>   
         <div class="gPanel">
             <h:outputLabel> Update weather</h:outputLabel>
             <h:form id="periodicallyUpdate">       
           
            <div class="pnlBack">
                <p:panel header="Periodically" styleClass="noB" style="background: transparent">
                    <p:dataList value="#{notificationBean.periodicallyUpdate}" var="periodicallyUpdateNotif" paginator="true" rows="5" type="none" paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink} {RowsPerPageDropdown}" >                   

                        <h:panelGrid columns="3">  
                            <p:commandLink  update=":periodicallyUpdate:mform:periodicallyUpdateDetail" oncomplete="PF('periodicallyUpdateDialog').show()" title="View Detail" style="margin-right:10px">
                                <p:graphicImage value="resources/images/lens.png"  height="30px" width="30px"/>
                                <f:setPropertyActionListener value="#{periodicallyUpdateNotif}" target="#{notificationBean.selectedPeriodicallyUpdate}" />
                            </p:commandLink>
                            <h:outputText value=" #{periodicallyUpdateNotif.notification.idEvent.description}" style="margin-right:20px"/>
                            <p:graphicImage url="#{notificationBean.getIcon(periodicallyUpdateNotif.notification.idEvent.city, periodicallyUpdateNotif.notification.idEvent.dateBegin)}"/>
                            <h:outputLabel value="#{notificationBean.getDescription(periodicallyUpdateNotif.notification.idEvent.city, periodicallyUpdateNotif.notification.idEvent.dateBegin)} " />
                            
                        </h:panelGrid>
                    </p:dataList>

                     <p:dialog id="periodicallyUpdateDialog" header="This is the modified event!" widgetVar="periodicallyUpdateDialog" modal="true" showEffect="blind" width="380" height="250" >
                         <h:form id="mform">
                             <p:outputPanel id="periodicallyUpdateDetail" style="text-align:center;" layout="block">
                                <p:panelGrid  columns="2">
                                    
                                    <h:outputLabel for="nameP" value="Name: " />  
                                    <h:outputText id="nameP" value="#{notificationBean.selectedPeriodicallyUpdate.notification.idEvent.city}" />
                                    <h:outputLabel for="cityP" value="City: " />  
                                    <h:outputText id="cityP" value="#{notificationBean.selectedPeriodicallyUpdate.notification.idEvent.city}" />
                                    <h:outputLabel for="dateBeginP" value="From: " />  
                                    <h:outputText id="dateBeginP" value="#{notificationBean.selectedPeriodicallyUpdate.notification.idEvent.dateBegin}" />
                                    <h:outputLabel for="dateEnd" value="To: " />  
                                    

                                </p:panelGrid>
                            </p:outputPanel>

                            <p:commandButton action="#{eventBean.getEventDB(periodicallyUpdateNotif.notification.idEvent)}" value="Go to Event" onclick="periodicallyUpdateDialog.hide()" />
                            <p:commandButton action="#{notificationBean.readPeriodicallyWeather()}" value="Ok" onclick="periodicallyUpdateDialog.hide()" />
                         </h:form>
                    </p:dialog>
                </p:panel>
                </div></h:form>
                
            <div class="pnlBack">
                <h:form id="oneDayBefore">
                    <p:panel header="1 Day Before" styleClass="noB" style="background: transparent">
                        
                            <p:dataList value="#{notificationBean.oneDayBefore}" var="oneDayBeforeNotif" paginator="true" rows="5" type="none"  paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink} {RowsPerPageDropdown}" >                   
                            <p:commandLink update=":oneDayBefore:mform:oneDayBeforeDetail" oncomplete="PF('oneDayBeforeDialog').show()" title="View Detail" style="float:left;margin-right:10px">
                                <p:graphicImage value="resources/images/lens.png"  height="30px" width="30px"/>
                                <f:setPropertyActionListener value="#{oneDayBeforeNotif}" target="#{notificationBean.selectedOneDayBefore}" />
                            </p:commandLink>
                            <h:panelGrid columns="3">  
                                <h:outputText value="#{oneDayBeforeNotif.notification.idEvent.description}" style="margin-right:20px"/>
                                <p:graphicImage url="#{notificationBean.getIcon(oneDayBeforeNotif.notification.idEvent.city, oneDayBeforeNotif.notification.idEvent.dateBegin)}"/>
                                <h:outputLabel value="#{notificationBean.getDescription(oneDayBeforeNotif.notification.idEvent.city, oneDayBeforeNotif.notification.idEvent.dateBegin)} " />

                            </h:panelGrid>
                        </p:dataList>
                        
                        <p:dialog id="oneDayBeforeDialog" header="This is the modified event!" widgetVar="oneDayBeforeDialog" modal="true" showEffect="blind" width="380" height="250">
                               <h:form id="mform"> <p:outputPanel id="oneDayBeforeDetail" style="text-align:center;" layout="block">
                                    <p:panelGrid  columns="2">

                                        <h:outputLabel for="name1D" value="Name: " />  
                                        <h:outputText id="name1D" value="#{notificationBean.selectedOneDayBefore.notification.idEvent.city}" />
                                        <h:outputLabel for="city1D" value="City: " />  
                                        <h:outputText id="city1D" value="#{notificationBean.selectedOneDayBefore.notification.idEvent.city}" />
                                        <h:outputLabel for="dateBegin1D" value="From " />  
                                        <h:outputText id="dateBegin1D" value="#{notificationBean.selectedOneDayBefore.notification.idEvent.dateBegin}" />
                                        <h:outputLabel for="dateEnd1D" value="To " />  
                                        <h:outputText id="dateEnd1D" value="#{notificationBean.selectedOneDayBefore.notification.idEvent.dateEnd}" />
                                        

                                    </p:panelGrid>
                                </p:outputPanel>
                                <p:commandButton action="#{eventBean.getEventDB(OneDayBeforeNotif.idEvent)}" value="Go to Event" onclick="oneDayBeforeDialog.hide()" />
                                <p:commandButton id="readOneDayWeather" action="#{notificationBean.readOneDayWeather()}" value="Ok" onclick="oneDayBeforeDialog.hide()" />
                               </h:form>
                        </p:dialog>
                    </p:panel></h:form>
            </div>
            <div class="pnlBack">
                <h:form id="ThreeDaysBefore">
                    <p:panel header="Until 3 Days" styleClass="noB" style="background: transparent">
                       
                        <p:dataList value="#{notificationBean.threeDaysBefore}" var="ThreeDaysBeforeNotif" paginator="true" rows="5" type="none" paginatorTemplate="{PreviousPageLink} {CurrentPageReport} {NextPageLink} {RowsPerPageDropdown}" >                   
                            <p:commandLink update=":ThreeDaysBefore:mform:ThreeDaysBeforeDetail" oncomplete="PF('ThreeDaysBeforeDialog').show()" title="View Detail" style="float:left;margin-right:10px">
                                <p:graphicImage value="resources/images/lens.png"  height="30px" width="30px"/>
                                <f:setPropertyActionListener value="#{ThreeDaysBeforeNotif}" target="#{notificationBean.selectedThreeDaysBefore}" />
                            </p:commandLink>
                            <h:panelGrid columns="3">  
                                <h:outputText value=" #{ThreeDaysBeforeNotif.notification.idEvent.description}" style="margin-right:20px"/>
                                <p:graphicImage url="#{notificationBean.getIcon(ThreeDaysBeforeNotif.notification.idEvent.city, ThreeDaysBeforeNotif.notification.idEvent.dateBegin)}"/>
                                <h:outputLabel value="#{notificationBean.getDescription(ThreeDaysBeforeNotif.notification.idEvent.city, ThreeDaysBeforeNotif.notification.idEvent.dateBegin)} " />

                            </h:panelGrid>

                        </p:dataList>
                           
                        <p:dialog id="ThreeDaysBeforeDialog" header="This is the modified event!" widgetVar="ThreeDaysBeforeDialog" modal="true" showEffect="blind" width="380" height="250">
                                <h:form id="mform"><p:outputPanel id="ThreeDaysBeforeDetail" style="text-align:center;" layout="block">
                                    
                                    <p:panelGrid  columns="2">
                                        

                                        <h:outputLabel for="name3D" value="Name: " />  
                                        <h:outputText id="name3D" value="#{notificationBean.selectedThreeDaysBefore.notification.idEvent.city}" />
                                        <h:outputLabel for="city3D" value="City: " />  
                                        <h:outputText id="city3D" value="#{notificationBean.selectedThreeDaysBefore.notification.idEvent.city}" />
                                        <h:outputLabel for="dateBegin3D" value="From " />  
                                        <h:outputText id="dateBegin3D" value="#{notificationBean.selectedThreeDaysBefore.notification.idEvent.dateBegin}" />
                                        <h:outputLabel for="dateEnd3D" value="To " />  
                                        <h:outputText id="dateEnd3D" value="#{notificationBean.selectedThreeDaysBefore.notification.idEvent.dateEnd}" />
                                        

                                    </p:panelGrid>
                                    <h:outputText id="move" value="Do you want to move this event on #{notificationBean.selectedThreeDaysBefore.notification.closedToEvent}?" /> <!-- metti not null-->
                                </p:outputPanel>
                                

                                <p:commandButton update="ThreeDaysBeforeDetail" id="changeWeatherEvent" action="#{notificationBean.changeWeatherEvent()}" value="Move event" onclick="threeDaysBeforeDialog.hide()" />
                                <p:commandButton id="dontChangeWeatherEvent" action="#{notificationBean.dontChangeWeatherEvent()}" value="Do NOT move"  onclick="threeDaysBefore.hide()" /> 
                                <p:commandButton action="#{eventBean.getEventDB(ThreeDaysBeforeNotif.notification.idEvent)}" value="Go to Event" onclick="threeDaysBeforeDialog.hide()" />
                                </h:form> 
                        </p:dialog>
                    </p:panel></h:form>
            </div>
         </div>
    <p:commandButton class="btn" action="homepage?faces-redirect=true" value="Homepage" />
            <script type="text/javascript">
                function start() {
                    PF('statusDialog').show();
                }
                
                function stop() {
                    PF('statusDialog').hide();
                }
                
            </script>
</body>
</html>



